<script setup lang="ts">
  import useService from './service'
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import HStatus from '@/components/common/status/HStatus.vue'

  const props = defineProps({
    factoryId: {
      type: String,
      required: true,
    },
  })

  // 使用服务
  const { total, loading, list, getList } = useService

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  /**
   * 获取请求参数
   */
  const getParam = () => {
    const result = {
      id: props.factoryId,
      pagination: {
        limit: 50,
        page: 1,
      },
    }

    if (paginationRef.value) {
      result.pagination.limit = paginationRef.value.size
      result.pagination.page = paginationRef.value.current
    }

    return result
  }

  /**
   * 获取表格数据
   */
  const getData = () => {
    getList(getParam().id, getParam().pagination)
  }

  defineExpose({
    total,
    getData,
  })
</script>

<template>
  <div class="factory_part_list">
    <div class="table">
      <el-table
        v-loading="loading"
        :border="true"
        style="max-height: 100%"
        stripe
        resizable
        :data="list"
        height="55vh"
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" width="50" />
        <el-table-column show-overflow-tooltip prop="model" label="配件信息" width="170" />
        <el-table-column show-overflow-tooltip prop="workNo" label="关联工单" width="160" />
        <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100" />
        <!-- 向商家收取总费用 -->
        <el-table-column
          show-overflow-tooltip
          prop="receiveFactoryTotalPrice"
          label="向商家收取总费用"
          width="150"
        >
          <template #default="scope">
            ￥{{ (scope.row.receiveFactoryTotalPrice || 0).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人" width="120" />
        <el-table-column show-overflow-tooltip prop="store" label="发货仓库" width="120" />
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="120" />
        <el-table-column show-overflow-tooltip prop="reviewTime" label="审核时间" width="150" />
        <el-table-column prop="state" label="状态" width="83">
          <template #default="scope">
            <HStatus type="warning" v-if="scope.row.status === 1">待审核</HStatus>
            <HStatus type="success" v-if="scope.row.status === 2">已通过</HStatus>
            <HStatus type="error" v-if="scope.row.status === 3">已驳回</HStatus>
            <HStatus type="info" v-if="scope.row.status === 4">已撒回</HStatus>
            <HStatus type="info" v-if="scope.row.status === 5">已取消</HStatus>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginationRef"
        :list_total="total"
        @size-change="getData"
        @current-change="getData"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .factory_part_list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;

    .table {
      margin: 0;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
